<template>
  <div class="collapse-custom-header">
    <slot></slot>
    {{ active ? "收起" : "展开" }}
    <div class="icon" :class="[active && 'active']">
      <bj-icon-font type="xl" color="#0068B7" :size="10"></bj-icon-font>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false,
    },
  },
};
</script>
<style lang="less" scoped>
.collapse-custom-header {
  color: var(--primary-color);
  .flex();
  align-items: center;
  .icon {
    transform: scale(0.75);
    margin-left: 4px;
    transition: 0.3s;
    &.active {
      transform: scale(0.75) rotate(180deg);
    }
  }
}
</style>
